import React from 'react';
import { Link } from "react-router-dom";
import BasicLayout from "@/src/layouts";
import Nav from "@components/nav";
import { Button, Col, Descriptions, Divider, message, Row, Upload } from 'antd';
import { LoadingOutlined, PlusOutlined } from '@ant-design/icons';
import './accountInfo.less';
import API from "@common/api.js";
import userStore from "../../common/userStore";
import moment from 'moment';
function getBase64(img, callback) {
  const reader = new FileReader();
  reader.addEventListener('load', () => callback(reader.result));
  reader.readAsDataURL(img);
}

function beforeUpload(file) {
  const isJpgOrPng = file.type === 'image/jpeg' || file.type === 'image/png';
  if (!isJpgOrPng) {
    message.error('You can only upload JPG/PNG file!');
  }
  const isLt2M = file.size / 1024 / 1024 < 2;
  if (!isLt2M) {
    message.error('Image must smaller than 2MB!');
  }
  return isJpgOrPng && isLt2M;
}

class AccountInfo extends React.Component {
  constructor() {
    super();
    this.state = {
      loading: false,
      username: "",
      gender: "",
      age: "",
      birthday: "",
      phoneNumber: "",
      address: "",
      introduction: "",
      isLogin: userStore.getState().isLogin
    }
    this.handleChange = this.handleChange.bind(this);
    this.render = this.render.bind(this);
    userStore.subscribe(() => { this.setState({ isLogin: userStore.getState().isLogin }) });
  }

  handleChange(info) {
    if (info.file.status === 'uploading') {
      this.setState({ loading: true });
      return;
    }
    if (info.file.status === 'done') {
      // Get this url from response in real world.
      getBase64(info.file.originFileObj, imageUrl =>
        this.setState({
          imageUrl,
          loading: false,
        }),
      );
    }

    // let tempData = API.getUserInfo()
  };

  componentDidMount() {
    API.getUserInfo().then(response => {
      response = response.data;
      console.log("000000000000" + response);
      let birthday_mo = moment(response.birthday);
      console.log(birthday_mo);
      let age = moment().diff(birthday_mo, "year");
      // console.log(a)

      console.log(age)
      this.setState({
        username: response.username,
        gender: (response.sex == 1) ? "男" : (response.sex == -1) ? "未知" : "女",
        age: age,
        birthday: birthday_mo.format("YYYY-MM-DD"),
        phoneNumber: response.phoneNumber,
        address: response.address,
        introduction: response.introduction,
      })

    });

  }

  render() {
    const { loading, imageUrl } = this.state;
    const uploadButton = (
      <div>
        {loading ? <LoadingOutlined /> : <PlusOutlined />}
        <div style={{ marginTop: 8 }}>Upload</div>
      </div>
    );
    return (
      <div id="accountInfoContainer">
        <BasicLayout header={<Nav />}>
          <Row justify="left" align={"middle"} gutter={[208, { xs: 8, sm: 16, md: 24, lg: 32 }]}>
            <Col span={4} push={1}>
              <div id="avatar1">
                <Upload
                  name="avatar"
                  listType="picture-card"
                  // className="avatar-uploader"
                  showUploadList={false}
                  action={API.getUploadProfileAddress()}
                  beforeUpload={beforeUpload}
                  onChange={this.handleChange}
                >
                  {imageUrl ? <img className="avatar1" src={imageUrl} alt="avatar" /> : uploadButton}
                </Upload>
              </div>

            </Col>
            <Col span={8} push={0}>
              <h1 id="accountInfoUserName">
                {this.state.username}
                {/* <span className="ProfileHeader-name">用户名</span> */}
              </h1></Col>
            <Col span={4} push={4}>
              {(userStore.getState()['isLogin']) ? (
                <Link to="/accountInfo/edit">
                  <Button className="AccountSettingsButton" type="primary">
                    编辑个人资料
                  </Button></Link>) : (<React.Fragment />)}

            </Col>
          </Row>
          <Divider></Divider>
          <Row justify="center" align={"middle"}>
            <Col span={20}>
              <div>
                <Descriptions title="个人资料" bordered={"true"} style={{ width: "100%" }}>
                  <Descriptions.Item label="用户名">{this.state.username}</Descriptions.Item>
                  <Descriptions.Item label="性别">{this.state.gender}</Descriptions.Item>
                  <Descriptions.Item label="年龄">{this.state.age}</Descriptions.Item>
                  <Descriptions.Item label="生日">
                    {this.state.birthday}
                  </Descriptions.Item>
                  <Descriptions.Item label="手机号">
                    {this.state.phoneNumber}
                  </Descriptions.Item>
                  <Descriptions.Item label="地区">{this.state.address}</Descriptions.Item>
                  <Descriptions.Item label="个人简介">
                    {this.state.introduction}
                  </Descriptions.Item>
                </Descriptions>
              </div>
            </Col>
          </Row>
        </BasicLayout>
      </div>
    );
  }
}

export default AccountInfo;